<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>商品列表</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/iscroll/scrollbar.css">
	<script type="application/javascript" src="${ctxStatic}/iscroll/iscroll.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctxFront}/css/iscroll.css">
	<script type="application/javascript" src="${ctxFront}/js/iscroll.js"></script>
	<style type="text/css">
		.table td {
			vertical-align: middle;
		}
		.ui-mobile .ui-page-active {
			display: block;
			overflow: hidden;
		}
		.ui-head-icon .ui-btn.ui-btn-a{
			background-color: #ffffff; 
		}
		.ui-head-icon .ui-btn.ui-btn-a:hover{
			background-color: #ffffff; 
		}
		.ui-head-icon .ui-btn.ui-btn-a:visited{
			background-color: #ffffff; 
		}
		.ui-head-icon .ui-btn, label.ui-btn {
			font-weight: 700;
			border-width: 0px;
			border-style: none;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			lastPage = ${page.lastPage};
			$("#listForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		//增加或删除
        function delProduct(){
       		var id = $("input[name='delId']").val();
			window.location.href = "${ctx}/ivm/product/delete?id="+id;
		}
		
		//打开删除确认面板
		function checkDelete(id){
			$("#delPopup").popup("open");
			$("input[name='delId']").val(id);
		}
        function updateSort() {
	    	$("#listForm").attr("action", "${ctx}/ivm/product/updateSort");
	    	$("#listForm").submit();
    	}
    	function changeClassify(obj){
			if($(obj).val()==""){
				$("#classifyIdList").val("");
				$("#classifyIdList").html("");
				$('select').selectmenu('refresh', true); //刷新下拉框控件
			}else{
				$("#classifyIdList").val("");
				$("#classifyIdList").html("");
				$('select').selectmenu('refresh', true); //刷新下拉框控件
				var parentId = $(obj).val();
				loading("正在获取二级分类，请稍等...");
				//异步
				$.ajax({
					type: 'get',
					url: '${ctx}/ivm/product/classifyChildList',
					data: 'parentId='+parentId,
					dataType: 'json',
					success: function(data){
						hideLoader();
						if(data!=null && data.length>0){
							for(var i=0; i<data.length; i++){
								var item = data[i];
	           					$("#classifyIdList").append("<option value='"+item.id+"'>"+item.name+"</option>");  
	           				}
						}
						$('select').selectmenu('refresh', true); //刷新下拉框控件
					},
					failure: function(){
					}				
				});
			}
		}
		
		/**
		 * 下拉刷新 （自定义实现此方法）
		 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
		 */
		function pullDownAction () {
			setTimeout(function () {	
				myScroll.refresh();
				setTimeout(function () {
					location.reload();
				}, 500);
			}, 1000);	
		}
		
		/**
		 * 滚动翻页 （自定义实现此方法）
		 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
		 */
		function pullUpAction () {
			if(lastPage) return;
			setTimeout(function () {	
				//获取下一页数据
				$("#pageNo").val(parseInt($("#pageNo").val())+1);
				var param = "name="+$("#name").val()+"&openState"+$("#openState").val()+"&classify.id="+$("#classify").val()+"&classifyIdList="+$("#classifyIdList").val();
					param += "&pageNo="+$("#pageNo").val()+"&pageSize="+$("#pageSize").val();
				//异步获取更多
				$.ajax({
					type: 'get',
					url: '${ctx}/ivm/product/list/next',
					data: param,
					dataType: 'json',
					success: function(data){
						if(data!=null){
							var list = data.list;
							if(data.lastPage){
							 	lastPage = data.lastPage;
								$("#pullUp").hide();
							}
							for(var i=0; i<list.length; i++){
								var product = list[i];
								var html = '<li data-icon="false">';
								html += '<a data-transition="slide" href="${ctx}/ivm/product/form?id='+product.id+'">';
								html += '<div class="product-img">';
								html += '<img id="photo" src="${ctx}/download?filePath='+product.logoUrl +'">';
							    html += '</div>';
							    html += '<h2>'+product.name+'</h2>';
							    html += '<p>单价：'+product.price +'元/'+product.productUnit.number+product.productUnit.name +'</p>';
							    html += '<p>起购量：'+(product.startSaleNum*product.productUnit.number)+product.productUnit.name+'<span class="stock">库存：'+product.stock+product.productUnit.name+'</span></p>';
							    html += '<p>分类：'+product.classifyNames +'</p>';
						        html += '<p class="sort">序号：'+product.sort+'</p>';
					        	html += '<div class="ui-slider ui-slider-switch ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all ui-mini">';
					        	if (product.openState=='1'){
					        	html += '<span class="ui-slider-label ui-slider-label-a ui-btn-active" role="img" style="width: 100%;">已上架</span>';
					        	}
					        	if (product.openState=='0'){
					        	html += '<span class="ui-slider-label ui-slider-label-b" role="img" style="width: 100%;">待售</span>';
								}
				        		html += '</div>';
					    		html += '</a>';
				    			html += '</li>';
				    			$("ul.custom-list").append(html);
							}
							$("ul.custom-list").listview('refresh'); // 刷新listview控件
						}
						myScroll.refresh();
					},
					failure: function(){
					}				
				});
			}, 1000);	
		}
	</script>
</head>
<body data-role="page">
	<div data-role="header" class="ui-header" data-position="fixed" data-tap-toggle="false">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
			<a href="${ctx }"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    </div>
	    <h1>商品列表</h1>
		<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right ui-head-icon">
	    	<a href="${ctx}/ivm/product/form" class="float-right"><img class="head-add-icon" src="${ctxFront}/images/head/android/add.png"/></a>
			<a href="javascript:" onclick="showSearchPanel()" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext ui-btn-a ui-btn-inline">search</a>
			<!-- <a href="#" onclick="updateSort()" class="float-right"><img class="head-save_sort-icon" src="${ctxFront}/images/head/android/save_sort.png"/></a> -->
	    </div>
	</div>
	<div role="main" class="ui-content">
		<c:if test="${page.count != 0}">
		<div id="wrapper">
			<div id="scroller">
				<div id="pullDown">
					<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
				</div>
				<tags:mbmessage content="${message}"/>
				<form id="listForm" method="post" style="margin-bottom: 0em;">
				<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
				<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
				<ul data-role="listview" class="custom-list">
				<c:forEach items="${page.list}" var="product" varStatus="ps">
					<li data-icon="false">
						<a data-transition="slide" href="${ctx}/ivm/product/form?id=${product.id}">
							<div class="product-img">
						    	<img id="photo" src="${ctx}/download?filePath=${product.logoUrl }">
						    </div>
						    <h2>${product.name}</h2>
						    <p>单价：${product.price }元/${product.productUnit.number}${product.productUnit.name }</p>
						    <p>起购量：${product.startSaleNum*product.productUnit.number}${product.productUnit.name }<span class="stock">库存：${product.stock}${product.productUnit.name }</span></p>
						    <p>分类：${product.classifyNames }</p>
					        <p class="sort">序号：${product.sort}</p>
				        	<div class="ui-slider ui-slider-switch ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all ui-mini">
					        	<c:if test="${product.openState=='1'}">
					        	<span class="ui-slider-label ui-slider-label-a ui-btn-active" role="img" style="width: 100%;">已上架</span>
					        	</c:if>
					        	<c:if test="${product.openState=='0'}">
					        	<span class="ui-slider-label ui-slider-label-b" role="img" style="width: 100%;">待售</span>
								</c:if>
				        	</div>
					    </a>
				    </li>
				</c:forEach>
				</ul>
				</form>
				<c:if test="${!page.lastPage}">
				<!-- iscroll部分 -->
				<div id="pullUp">
					<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
				</div>
				</c:if>
			</div>
		</div>
		</c:if>
		<c:if test="${page.count == 0}">
			暂无商品.
		</c:if>
		<div data-role="popup" id="delPopup" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
			<div data-role="header" data-theme="a">
		    	<h1>删除</h1>
		    </div>
		    <div role="main" class="ui-content">
		        <h3 class="ui-title">是否确定删除？</h3>
		        <input type="hidden" id="delId" name="delId" value=""/>
		        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" onclick="delProduct()" data-transition="flow">确定</a>
		        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">返回</a>
		    </div>
		</div>
		<!-- search content -->
		<div id="search_bg" class="search_bg" onclick="closeSearchPanel()"></div>
		<div id="search-panel" class="search-panel-display-overlay search-panel">
			<div class="ui-header ui-bar-inherit" style="background-color: #e9e9e9;">
				<a href="javascript:" onclick="closeSearchPanel()" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
				<h1 class="ui-title" role="heading" aria-level="1">商品高级搜索</h1>
			</div>
	        <form:form id="searchForm" modelAttribute="product" action="${ctx}/ivm/product/" method="post">
				<form:input path="name" htmlEscape="false" maxlength="50" placeholder="请输入商品名称..."/>
				<form:select path="openState">
					<form:option value="" label="请选择状态"/>
					<form:options items="${fns:getDictList('open_state')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
				<form:select id="classify" path="classify.id" onchange="changeClassify(this)">
					<form:option value="" label="请选择一级分类"/>
					<form:options items="${fns:getClassifyOneList()}" itemLabel="name" itemValue="id" htmlEscape="false"/>
				</form:select>
				<form:select path="classifyIdList" data-native-menu="false" multiple="multiple">
					<form:option value="" label="请选择二级分类"/>
					<form:options items="${fns:getClassifyTwoList(product.classify.id)}" itemValue="id" itemLabel="name" htmlEscape="false"/>
				</form:select>
		        <button onclick="$('#searchForm').submit();" data-icon="search" data-iconshadow="true" class="btn btn-primary">开始搜索</button>
			</form:form>
		</div><!-- /search content -->
	</div>
	<%@include file="/WEB-INF/views/mobile/layouts/menu.jsp" %>
</body>
</html>
